<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>会员中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon2.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;}
        .products-list ul li{color: #808080;font-size: 14px;padding: 0 15px}
        .products-list ul li span.kile{ margin-right: 8px;color: #2dc22d }
        .numLi{height: 70px !important;}
        .numLi p.am-u-sm-4{padding: 0;}
        .numLi p span{width: 100%;display: block;height: 25px;color: #000000;font-weight: bold;}
        .numLi p span b{color: #e81616;}
        .am-btn2{width: 95px; height: 35px;line-height: 35px;display: inline-block;margin-top:10px;font-size: 14px;border-radius: 5px;}
        .am-btn-default{background-color: #cccccc;border-color: #bebcb5;color: #fff}
        .out{display: none;}
        .green{color: #2dc22d}
    </style>
</head>
<body>
<div class="products-list" style="border-top:1px solid #d2d2d2">
    <ul>
        <li class="numLi">
            <p class="am-u-sm-8"><span>姓名：高富帅</span><span>下单时间：10:33 <b>（加急）</b></span></p>
            <p class="am-u-sm-4">
                <button type="submit" class="am-btn-danger am-btn am-btn2">拨打电话</button>
            </p>
        </li>
        <li>
            <span class="am-fl" style="height: 50px;"><i class="ui-fonts icon-chevron-right" style="color: #e3604a">&#xe948;</i></span>
            <span class="am-fl">深圳市南山区南园工业园A栋首层</span>
            <span class="am-fr"><i class="ui-fonts icon-chevron-right am-fr">&#xe601;</i></span>
            <span class="kile am-fr">1.6km</span>
        </li>
    </ul>
</div>


<div class="products-list" style="border-top:1px solid #d2d2d2;margin-top: 10px;">
    <ul>
        <li class="change">
            <span class="am-fl">接车在途</span>
            <span class="am-fr">
                <i class="ui-fonts icon-chevron-right am-fr down ">&#xe600;</i>
                <i class="ui-fonts icon-chevron-right am-fr right out">&#xe601;</i>
            </span>
        </li>
        <li class="add">
            <span class="am-fl">送车前往快快洗车中心</span>
        </li>
        <li class="add">
            <span class="am-fl">洗车中......</span>
        </li>
        <li class="add">
            <span class="am-fl green">洗车返回客户地址</span>
        </li>
    </ul>
</div>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom" style="height: 75px;text-align: center;">
    <button type="submit" class="btn am-btn am-btn-default am-btn-lg am-btn-buy" style="margin-bottom: 10px;">服务完成</button>
</section>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom out" style="height: 120px;text-align: center;">
    <button type="submit" class="btn am-btn am-btn-success am-btn-lg am-btn-buy" style="margin-bottom: 10px;">服务完成</button>
    <button type="submit" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy">取消订单</button>
</section>

<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('.change').on('click', function() {
            if ($('.down').hasClass('out')) {
                $('.down').removeClass('out');
                $('.right').addClass('out');
            } else {
                $('.right').removeClass('out');
                $('.down').addClass('out');
            }

            $('.add').slideToggle('slow');
        });
    });
</script>
</body>
</html>